<template>
  <div class="warning-detail-pop-msg">
    <div class="pop-msg-title">
      <span>案件详情</span>
    </div>
    <div class="pop-msg-content">
      <div class="pop-msg-content-item">
        <span class="point"></span>
        <div class="content">报案内容：{{caseEventData.jyaq}}</div>
      </div>
      <div class="pop-msg-content-item">
        <span class="point"></span>
        <div class="content">报案人：{{caseEventData.empname}}</div>
      </div>
      <div class="pop-msg-content-item">
        <span class="point"></span>
        <div class="content">报案电话：{{caseEventData.telephone}}</div>
      </div>
      <div class="pop-msg-content-item">
        <span class="point"></span>
        <div class="content">案件类型：{{caseEventData.ajlbmc}}</div>
      </div>
      <div class="pop-msg-content-item">
        <span class="point"></span>
        <div class="content">报案时间：{{caseEventData.basj}}</div>
      </div>
    </div>
    <div class="pop-msg-bottom" v-if="caseEventData.imageUrls">
      <img :src="item" v-for="(item, index) in caseEventData.imgUrls" :key="index">
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({
  name: 'warning-detail-pop-msg'
})
export default class WarningDetailPopMsg extends Vue {
  @Prop({
    default: () => {
      return {
        detail: {
          jyaq: '604公交在淮阳路遭遇人员持刀抢劫 威胁司机。',
          empname: '张扬',
          telephone: '13362521320',
          ajlbmc: '刑事案件',
          basj: '2021-7-23 15:21:20'
        },
        imgUrls: ['', '', '']
      }
    }
  })
  private caseEventData!: any
}
</script>

<style lang="scss" scoped>
.warning-detail-pop-msg {
  box-sizing: border-box;
  width: 398px;
  height: 368px;
  background: url('../../../../../assets/images/situational-awareness/warning-detail-box.png') no-repeat center;
  padding: 33px 35px 60px 37px;
  font-family: 'PingFang Regular';
  text-align: left;
  .pop-msg-title {
    font-size: 20px;
    font-weight: bold;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .pop-msg-content {
    margin-top: 20px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    font-family: 'PingFang Regular';
    &-item {
      display: flex;
      box-sizing: border-box;
      width: 100%;
      position: relative;
      margin-bottom: 6px;
      .point {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #0c81fe;
        margin-top: 7px;
        margin-right: 5px;
      }
    }
  }
  .pop-msg-bottom {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    margin-top: 10px;
    padding: 0 5px;
    img {
      width: 93px;
      height: 75px;
    }
  }
}
</style>
